<template>
  <div class="details">
    <!-- 页头开始 -->
    <div>
      <el-button @click="goBack" type="text" size="medium ">返回</el-button>
    </div>
    <!-- 页头结束 -->
    <!-- 表格开始 -->
    <el-table :data="productDetails" style="width: 100%; margin: 5px auto">
      <el-table-column prop="id" label="订单项编号" align="center">
      </el-table-column>
      <el-table-column prop="productId" label="产品编号" align="center">
      </el-table-column>
      <el-table-column prop="name" label="产品" align="center">
        <template slot-scope="scope">
          {{ scope.row.product.name }}
        </template>
      </el-table-column>
      <el-table-column prop="photo" label="产品图片" align="center"
        ><template slot-scope="scope">
          <el-popover width="150px" trigger="hover" placement="right">
            <img width="100%" :src="scope.row.product.photo" alt="" />
            <div slot="reference" class="name-wrapper">
              <img width="50px" :src="scope.row.product.photo" alt="" />
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center">
        <template slot-scope="scope">
          ¥<span>{{ scope.row.product.price }}</span
          >元
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量" align="center">
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 三个卡片信息开始 -->
    <!-- 订单基本信息 -->
    <div class="box">
      <div class="top">订单基本信息</div>
      <div class="bottom">
        <div>订单编号：{{ details.id }}</div>
        <div>
          订单金额：¥<span>{{ details.total }}</span
          >元
        </div>
        <div>下单时间：{{ parseTime(details.orderTime) }}</div>
        <div>订单状态：{{ details.status }}</div>
      </div>
    </div>
    <!-- 下单者信息 -->
    <div class="box">
      <div class="top">下单者信息</div>
      <div class="bottom">
        <div>下单者：{{ customerDetails.realname }}</div>
        <div>下单者手机号：{{ customerDetails.telephone }}</div>
      </div>
    </div>
    <!-- 雇主信息 -->
    <div class="box">
      <div class="top">雇主信息</div>
      <div class="bottom">
        <div>雇主：{{ employerDetails.username }}</div>
        <div>雇主手机：{{ employerDetails.telephone }}</div>
        <div>服务地址：{{ employerDetails.address }}</div>
      </div>
    </div>
    <!-- 三个卡片信息结束 -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { parseTime } from "../../utils/index";
import { get, post } from "../../utils/request";
export default {
  data() {
    return {
      // 所有详细信息
      details: {},
      // 产品详细信息
      productDetails: [],
      // 下单者详细信息
      customerDetails: {},
      // 雇主详细信息
      employerDetails: {},
    };
  },
  methods: {
    // 时间转换
    parseTime,
    // 点击返回
    goBack() {
      this.$router.go(-1);
    },
    // 获取订单详情信息
    getAllDetails() {
      get("/order/findById", { id: this.$route.query.id }).then((res) => {
        this.details = res.data;
        // 产品详细信息
        this.productDetails = this.details.orderLines;
        let product = this.details.orderLines[0].product;
        this.productDetails[0].name = product.name;
        this.productDetails[0].photo = product.photo;
        // 下单者详细信息
        this.customerDetails = this.details.customer;
        // 雇主详细信息
        this.employerDetails = this.details.address;
        this.employerDetails.address =
          this.details.address.city +
          this.details.address.area +
          this.details.address.address;
      });
    },
  },
  created() {
    // 获取订单详情信息
    this.getAllDetails();
  },
};
</script>

<style lang="scss" scoped>
.box {
  margin: 10px;
  box-shadow: 2px 2px 2px #c2c1c1;
  border-radius: 10px;
  overflow: hidden;
  float: left;
  .top {
    background-color: rgb(44, 181, 172);
    padding: 1.2em 1em;
    color: white;
  }
  .bottom {
    padding: 1.2em 1em;
    div {
      margin: 1em 0;
    }
  }
}
span {
  color: red;
  font-size: 18px;
  margin: 0 5px;
}
</style>